<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex布局</title>
		<style type="text/css">
			.wrapper{
				width: 2050px;
				height: 600px;
				border: 1px dashed #000;
				display: flex;
				margin: 0 auto;
				/*flex-direction: column;*//*column为竖排*/
				flex-wrap: wrap;
				/*flex-flow: wrap row;*//*上两个的集合*/
				/*justify-content:space-between;/*flex-横排左右竖排上下center居中*/
				/*space-...子集中间空隙*/
				/*align-items: stretch;*//*flex-横排上下竖排左右center居中*/
			}
			.wrapper2{
				height: 200px;
				display: flex;
				flex-direction: row;
			}
			.wrapper3{
				height: 200px;
				display: flex;
				flex-direction: row;
			}
			.item1{
				width: 200px;
				height: 200px;
				background: red;
			}
			.item2{
				width: 200px;
				height: 200px;
				background: yellow;
			}
			.item3{
				width: 200px;
				height: 200px;
				background: yellow;
			}
			.item4{
				width: 200px;
				height: 200px;
				background: gray;
			}
			.item5{
				width: 200px;
				height: 200px;
				background: green;
			}
			.item6{
				width: 200px;
				height: 200px;
				background: black;
			}
			.item7{
				width: 200px;
				height: 200px;
				background: brown;
			}
			.item8{
				width: 200px;
				height: 200px;
				background: blanchedalmond;
			}
			.item9{
				width: 200px;
				height: 200px;
				background: purple;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="wrapper1">
				<div class="item1" style="height: 400px;">item1</div>
			</div>
			<div class="wrapper2">
				<div class="item2">item2</div>
				<div class="item3">item3</div>
				<div class="item4">item4</div>
				<div class="item5">item5</div>
			</div>
			<div class="wrapper3">
				<div class="item6">item6</div>
				<div class="item7">item7</div>
				<div class="item8">item8</div>
				<div class="item9">item9</div>
			</div>
		</div>
		
		
		
	</body>
</html>
